<!-- <!-- /* <!-- 添加标点 -->
<template>
	<view class="content">

		<view class="wrapperBox" style="position: relative;width: 100vw;height: 100vh;z-index: 1;">

			<view style="width: 120vw;height: 120vh;top: -10vh;left: -10vw;position: absolute;" id="wrapper"></view>
			<!-- 定位按钮 -->
			<view class="button-container">
				<button class="locate-button" style="background-color: #ffd427;" @click="addClick()">定位</button>
                   
                <select name="select" id="mySelect">
                 <!-- <option value="我的位置" selected>{{got[0].id}}</option>
                  <option value="高端精品宠物商店">{{got[1].id}}</option>
                  <option value="wkb宠物店">{{got[2].id}}</option> -->
				  <option v-for="item in got" :key="item.id" :value="item.value">
				        {{ item.id }}
				      </option>
                </select>
				<button class="locate-button" style="background-color: #ffd427;" @click="clicked()">Go</button>
				
			</view>
		</view>

	</view>
</template>
<script setup>
  import { onMounted, ref } from 'vue';
  //TMap 和 qq 已经被正确引入
  const iid=ref();
  const selectedOption=ref();
  const selectedOption1=ref();
  
  //导航用
  const columns=ref([])
  const show=ref(false)
      const got=ref([])//导航信息
      const selectedItem=ref([]);
      // 声明响应式状态
      const geolocation = ref(null);
      const map = ref(null);
      const markerLayer=ref();//添加点击
      const longitude = ref(0);
      const latitude = ref(0);
      const queryParams = ref({ address: '' });
      const startPosition =ref();
      // 组件挂载完成后执行
        initMap();
        
 onMounted(() => {
		a();
      }); 
  
      function initMap() {
        // 1，初始化腾讯地图
        geolocation.value = new qq.maps.Geolocation('WK4BZ-VO6KT-U7WXR-V3W4J-TPVSS-23FSH', 'myapp');
        // 2，并且开始定位
        getMyLocation();
      }
  
      // 获取当前位置
      function getMyLocation() {
        geolocation.value.getLocation(showPosition, errorPosition);
      }
  
      // 定位成功
      function showPosition(position) {
        console.log('定位成功');
        longitude.value = position.lng;
        latitude.value = position.lat;
        queryParams.value.address = position.city + position.province + position.addr;
        // 定位成功后开始绘制地图
        setMap();
      }
  
      // 定位失败
      function errorPosition() {
        console.error('定位失败');
      }
  
      const setMap = () => {
        // 防止重复绘制地图
        if (map.value) {
          return;
        }
  
        // 获取存放地图的容器
        const mapEl = 'wrapper';
        // 设置地图中心点
        startPosition.value = new TMap.LatLng(latitude.value, longitude.value);
        // 定义地图选项
        const myOptions = {
          rotation: 20, // 设置地图旋转角度
          pitch: 30, // 设置俯仰角度（0~45）
          zoom: 12, // 设置地图缩放级别
          center: startPosition.value, // 设置地图中心点坐标
        };
        try {
          // 开始生成地图
          map.value = new TMap.Map(mapEl, myOptions);
        } catch (error) {
          console.error('error:', error);
        }
   // 添加地图标点
   markerLayer.value =  new TMap.MultiMarker({
          map: map.value,
          styles: {
            marker: new TMap.MarkerStyle({
              width: 20,
              height: 30,
        
              anchor: { x: 10, y: 30 },
            }),
            marker2: new TMap.MarkerStyle({
              width: 20,
              height: 30,
              anchor: { x: 10, y: 30 },
            }),
          },
          geometries: [
            {
              id: '我的位置',
              styleId: 'marker',
              position: startPosition.value,
              properties: {
                title: 'marker',
              },
            },
            {
              id: '高端精品宠物服务店',
              styleId: 'marker2',
              position: new TMap.LatLng(25.488069,119.031313),
              properties: {
                title: 'marker2',
              },
            },
            {
              id: 'wkb宠物店',
              styleId: 'marker2',
              position: new TMap.LatLng(25.498088,119.041399),
              properties: {
                title: 'marker2',
              },
            },
          ],
        });
        markerLayer.value.geometries.forEach(geo => {
          console.log("markerID:" + geo.id);
          console.log("当前marker位置:" + geo.position);
          got.value.push({
            id: geo.id,
            lat: geo.position.getLat(), // 获取纬度
            lng: geo.position.getLng() // 获取经度
          });
		  
        });
		got.value.forEach(item => {
		  console.log(item.id); // 应该输出每个元素的 id
		});	
		columns.value=got.value.map(item=>item.id)
		show.value = true;
		
      };
      //按钮部分
	  function a(){
		  const selectElement=document.getElementById('mySelect');
	    selectElement.addEventListener('click', function() {
	     console.log('Select element was clicked or interacted with.');
	     // 在这里添加你需要执行的代码
	   });
	    selectElement.addEventListener('change', function() {
	       const selectedValue = this.options[this.selectedIndex].value;
	       console.log('Selected value is now:', selectedValue);
		   selectedOption.value = selectedValue;
	       // 在这里添加选中选项后的逻辑
	     });
	   }
	   
	   function clicked(){
		   const lue= got.value.find(option => option.id === selectedOption.value);
		   console.log(lue)
		  goToThere(latitude.value,longitude.value,lue.lat,lue.lng);
		   
	   }
      //定位
      function addClick(){
        map.value.setCenter(new TMap.LatLng(latitude.value,longitude.value));//坐标为天安门
		a()
      }
    
     //新思路：定义一个变量存储
    
    //     //监听回调函数（非匿名函数）
    //  const eventClick = function (evt) {
    //         console.log("markerID:" + evt.geometry.id);
    //         console.log("当前marker位置:" + evt.geometry.position.toString());
    //     }
    //     function addClick() {
    //         //监听marker点击事件
    //         markerLayer.on("click", eventClick)
    //     }
// const cMap=()=>{
//     let latLng = new TMap.LatLng(latitude.value, longitude.value);
//           // 将地图中心点设置为当前位置，并进行跳转
//           map.value.setCenter(new TMap.LatLng(latitude.value,longitude.value));
//         }


           //路线规划
    const destination = ref(null); // 路线规划结果
    const queryParams1 = ref({ routesList: '' }); // 用于存储路线列表
    const polylineLayer = ref(null); // 用于存储折线图层

    // 规划路线到目的地的方法
    const goToThere = (startLat, startLng, endLat, endLng) => {
      const startPosition = new TMap.LatLng(startLat, startLng);
      const endPosition = new TMap.LatLng(endLat, endLng);

      // 创建起点和终点的标记
      destination.marker = new TMap.MultiMarker({
       // 创造MultiMarker创建起点和终点的标点样式
       id: 'marker-layer',
        map: map.value,// 使用之前已经绘制好的地图 进行起点和终点的标点
        styles: {
          start: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
          }),
          end: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
          }),
      },//点标记数据数组
        geometries: [
          {
            id: 'start',
            styleId: 'start',
            position:startPosition,
          },
          {
            id: 'end',
            styleId: 'end',
            position: endPosition,
          },
        ],
      });

      // 新建一个驾车路线规划类
      destination.driving = new TMap.service.Driving({
        mp: false, // 是否返回多方案
        policy: 'PICKUP,NAV_POINT_FIRST', // 规划策略      
    });

      destination.driving.search({ from: startPosition, to: endPosition }).then((result) => {
        // ... 省略其他代码，保持原有逻辑不变
        // 展示路线引导  有可能是多条路线的展示
        queryParams1.value.routesList = JSON.stringify(result.result.routes);
        result.result.routes.map((item, index) => {
          displayPolyline(item.polyline, index);
        });
        // 关闭抽屉
        // souShow.value = false;
      });
    };

    // 绘制路径折线样式的方法
    const displayPolyline = (pl, num) => {
      if (polylineLayer.value) {
        // 更新图层
         // updateGeometries 这个方法是更新图层
         polylineLayer.value.updateGeometries([
          {
            id: `p_${num}`,
            styleId: `style_${num}`, //和下面的styleID一一对应
            paths: pl,
          },
        ]);
      } else {
        // 创建新的折线图层
        polylineLayer.value = new TMap.MultiPolyline({
          // ... 省略其他代码，保持原有逻辑不变
          id: 'polyline-layer',
          map: map.value,
          styles: {
            style_0: new TMap.PolylineStyle({
              color: '#11CA53', //线填充色
              width: 6, //折线宽度
              borderWidth: 0, //边线宽度
              borderColor: '#11CA53', //边线颜色
              lineCap: 'round', //线端头方式
            }),
            style_1: new TMap.PolylineStyle({
              color: '#3777FF',
              width: 6,
              borderWidth: 0,
              borderColor: '#3777FF',
              lineCap: 'round',
            }),
            style_2: new TMap.PolylineStyle({
              color: '#CC0000', //线填充色
              width: 6, //折线宽度
              borderWidth: 0, //边线宽度
              borderColor: '#CC0000', //边线颜色
              lineCap: 'round', //线端头方式
            }),
          },
          geometries: [
            {
              id: `p_0`,
              styleId: `style_0`,
              paths: pl,
            },
          ],
        });
      }
    };

  
  </script>
// 	// ------------------------------ 更新内容1 ----------------------------- //
// 	// 创建多个标点
// 	let agriculture = []; // 生成图标实例1
// 	let property = []; // 生成图标实例2
// 	let mapObj = null; // 生成地图实例
// 	let construction = []; // 生成图标实例3
// 	let noRented = []; // 生成图标实例4
// 	let marker = []; // 生成标点实例
// 	let infoWindow = null; // 自定义信息窗体
// 	let isShowText = false; // 窗体是否打开 
// 	// ---------------------------------------------------------------------- //

// 	window.mapInit = function() { // 挂载地图实例
// 		mapObj = new TMap.Map("wrapper", {
// 			center: new TMap.LatLng(24.566133, 118.092809), // 地图初始坐标
// 			zoom: 14, // 缩放等级
// 			mapStyleId: 'style1', // 地图样式
// 			baseMap: { //设置底图样式
// 				type: 'vector', //设置底图为矢量底图
// 				features: [ //设置矢量底图要素类型
// 					'base',
// 					'point'
// 				]
// 			},
// 			zoomControl: false, // 设置是否启用缩放控件
// 		});
// 		infoWindow = new TMap.InfoWindow({ // 设置信息窗体
// 			map: mapObj, // 挂载的地图实例
// 			enableCustom: true, // 是否自定义窗体
// 			position: new TMap.LatLng(24.566133, 118.092809), // 初始标点坐标
// 			offset: { // 信息窗体的偏移量
// 				y: 30,
// 				x: 230
// 			},
// 			content: <!-- `<div style="width: 379px;height: 134px;padding:16px;"></div>`, --> // 必须设置一个底边的dom，否则会出现白边
// 		});

// 		mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);

// 		mapObj.on("click", function(evt) { // 地图全局事件
// 			//设置infoWindow
// 			if (isShowText) { // 控制是否打开窗体
// 				isShowText = false;
// 			} else {
// 				infoWindow.close();
// 			}
// 		})
// 		console.log("acd");

// 	}
// 	import agricultureIcon from '@/images/location.png';
// 	import iconIcon from '@/static/images/Audition.png';
// 	import bg0 from '@/static/images/bg02.jpg';

// 	// 引入腾讯地图 Geolocation 插件
// 	export default {
// 		data() {
// 			return {

// 				key: 'WK4BZ-VO6KT-U7WXR-V3W4J-TPVSS-23FSH',
// 				title: '四川大学',
// 				distance: 0, //"距离"
// 				latitude: 39.909, // 默认定在首都
// 				longitude: 116.39742,
// 				scale: 12, // 默认16
// 				markers: [],
// 				markerHeight: 30,
// 				doorAddress: [], //门店
// 				// ------------------------------ 更新内容2 ----------------------------- //
// 				iconItem: [{ // 模拟数据
// 					name: 'agriculture', // 样式类型
// 					src: agricultureIcon, // 图片路径
// 					position: [24.562036, 118.092659], // 标点中心坐标
// 					markerList: [
// 						[
// 							22.22839, 113.460787, 22.227644, 113.460801, 22.227582, 113.45945, 22.228346,
// 							113.459423
// 						]
// 					],
// 					fillColor: 'rgba(35, 181, 29, 0.6)',
// 					fillColorHover: 'rgba(35, 181, 29, 0.8)',
// 					strokeColor: 'rgba(35, 181, 29, 1)',
// 					markerUrl: agricultureIcon, // 标点图片样式
// 					background: bg0,
// 					titleUrl: iconIcon,
// 				}, {
// 					name: 'property',
// 					src: agricultureIcon,
// 					position: [24.567963, 118.093197],
// 					markerList: [
// 						[
// 							22.22839, 113.460787, 22.227644, 113.460801, 22.227582, 113.45945, 22.228346,
// 							113.459423
// 						]
// 					],
// 					fillColor: 'rgba(35, 181, 29, 0.6)',
// 					fillColorHover: 'rgba(35, 181, 29, 0.8)',
// 					strokeColor: 'rgba(35, 181, 29, 1)',
// 					markerUrl: agricultureIcon, // 标点图片样式
// 					background: bg0,
// 					titleUrl: iconIcon,
// 				}, {
// 					name: 'construction',
// 					src: agricultureIcon, // 图片路径
// 					position: [24.585131, 118.097197],
// 					markerList: [
// 						[
// 							22.22839, 113.460787, 22.227644, 113.460801, 22.227582, 113.45945, 22.228346,
// 							113.459423
// 						]
// 					],
// 					fillColor: 'rgba(35, 181, 29, 0.6)',
// 					fillColorHover: 'rgba(35, 181, 29, 0.8)',
// 					strokeColor: 'rgba(35, 181, 29, 1)',
// 					markerUrl: agricultureIcon, // 标点图片样式
// 					background: bg0,
// 					titleUrl: iconIcon,
// 				}, {
// 					name: 'noRented',
// 					src: agricultureIcon, // 图片路径
// 					position: [24.581111, 118.095197],
// 					markerList: [
// 						[
// 							22.22839, 113.460787, 22.227644, 113.460801, 22.227582, 113.45945, 22.228346,
// 							113.459423
// 						]
// 					],
// 					fillColor: 'rgba(35, 181, 29, 0.6)',
// 					fillColorHover: 'rgba(35, 181, 29, 0.8)',
// 					strokeColor: 'rgba(35, 181, 29, 1)',
// 					markerUrl: agricultureIcon, // 标点图片样式
// 					background: bg0,
// 					titleUrl: iconIcon,
// 				}]
// 				// ---------------------------------------------------------------------- //
// 			}
// 		},
// 		onLoad() {
// 			// #ifdef H5
// 			this.loadScrpit();
// 			// #endif

// 			// ------------------------------ 更新内容3 ----------------------------- //
// 			let time = setInterval(() => { // 等待地图挂载
// 				if (mapObj != null) {
// 					clearInterval(time);
// 					this.setIcon(); // 挂载坐标图片信息
// 					// 地图挂载完成后，调用 getGeolocationByIP 函数
// 					// 假设 "59.57.133.0" 是您要查询的 IP 地址
// 					// 	      this.getGeolocationByIP('59.57.133.0', mapObj);
// 				}
// 			}, 100)
// 			console.log("acc");

// 			// ---------------------------------------------------------------------- //
// 		},
// 		created() {
// 			let that = this;
// 			window.getParkDetail = function(res) { // 设置信息窗体触发事件
// 				if (res == 0) {
// 					that.isDetail1 = true;
// 				}
// 				if (res == 2) {
// 					that.isDetail2 = true;
// 				}
// 			};
// 			console.log("asss");
// 		},

// 		methods: {
// 			decodePolyline(polyline, precision) {
// 				let index = 0;
// 				let lat = 0;
// 				let lng = 0;
// 				const coordinates = [];
// 				const len = polyline.length;

// 				// Helper function to decode a single coordinate
// 				function decodeCoordinate(shift, size) {
// 					let result = 0;
// 					while (index < len) {
// 						const b = polyline.charCodeAt(index) - 63;
// 						index++;
// 						result |= (b & 0x1f) << shift;
// 						if (b < 0x20) {
// 							break;
// 						}
// 						shift += 5;
// 					}
// 					return result / precision;
// 				}

// 				while (index < len) {
// 					let result = decodeCoordinate(0, 5);
// 					const isLat = result & 1;
// 					result = (result >> 1) * (isLat ? -1 : 1);
// 					if (isLat) {
// 						lat += result;
// 					} else {
// 						lng += result;
// 						coordinates.push([lat, lng]);
// 					}
// 				}

// 				return coordinates;
// 			},
// 			getLocation() {
// 				const userLocation = new TMap.LatLng(24.623911, 118.087898);
// 				let geometries = [];

// 				for (let i = 0; i < 1; i++) {
// 					let obj = { // 点标记数据

// 						"styleId": this.iconItem[i].name, // 对应标点实例的style的名称
// 						"position": new TMap.LatLng(24.623911, 118.087898), // 标点的坐标
// 						"properties": { // 自定义属性
// 							"title": this.iconItem[i].name
// 						}
// 					}
// 					geometries.push(obj);
// 				}

// 				marker = new TMap.MultiMarker({ // 构造函数创建标点实例
// 					id: 'marker-layer11', // 定义的ID名称
// 					map: mapObj, // 挂载的地图实例
// 					styles: { // 加入标点的样式
// 						"initial": new TMap.MarkerStyle({
// 							"width": 75, // 定义宽，单位：PX
// 							"height": 90, // 定义高，单位：PX
// 							"src": this.iconItem[0].markerUrl, // 标点图片链接：本地图片
// 						}),

// 					},
// 					geometries: geometries
// 				});
// 				// 将标记添加到地图对象上
// 				marker.setMap(mapObj);
// 				mapObj.panTo(userLocation); // 平滑移动到用户位置
// 				mapObj.setCenter(userLocation); // 设置地图中心点到初始位置
// 				mapObj.setZoom(14); // （可选）重置地图的缩放级别
// 			},
// 			// goNavigate(){
// 			//   const plugin = requirePlugin('routePlan');
// 			//  			      const key = this.key; // 腾讯地图 key 值
// 			//  			      const referer = '__UNI__EE135E5'; // 确保这是你的小程序 App ID

// 			//  			      // 构建终点坐标字符串
// 			//  			      const endPoint = JSON.stringify({
// 			//  			        name: '目的地', // 可以设置为具体的目的地名称
// 			//  			        latitude: 24.585131, 
// 			//  			        longitude: 118.097197,
// 			//  			      });

// 			//  			      // 调用腾讯地图导航
// 			//  			      wx.navigateTo({
// 			//  			        url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${endPoint}`
// 			//  			      });
// 			// },
// 			goNavigate() {
// 				const fromLocation = '24.623911,118.087898';
// 				const toLocation = '24.567963,118.093197';
// 				const key = this.key; // 替换为您的有效腾讯地图 API 密钥

// 				// 构造请求的 URL
// 				const url =
// 					`https://apis.map.qq.com/ws/direction/v1/walking?from=${fromLocation}&to=${toLocation}&key=${key}`;

// 				// 发送 GET 请求
// 				fetch(url)
// 					.then(response => {
// 						if (response.ok) {
// 							return response.json(); // 解析 JSON 响应数据
// 						}
// 						throw new Error('Network response was not ok.');
// 					})
// 					.then(data => {
// 						if (data.status === 0 && data.result && data.result.routes && data.result.routes[0].polyline) {
// 							const polyline = data.result.routes[0].polyline;
// 							// 假设精度为 1e5，根据实际精度调整
// 							const precision = 1e5;
// 							const coordinates = this.decodePolyline(polyline, 1e5);;
// 							drawRouteOnMap(coordinates);
// 						} else {
// 							console.error('Error with route data:', data.message);
// 						}
// 					})
// 					.catch(error => {
// 						console.error('There has been a problem with your fetch operation:', error);
// 					});
// 			},
// 			// 绘制路线的方法，需要根据实际情况实现
// 			drawRouteOnMap(decodedCoordinates) {
// 				const polylineOptions = {
// 					path: decodedCoordinates,
// 					strokeColor: "#FF0000",
// 					strokeWeight: 3,
// 					strokeOpacity: 0.5
// 				};
// 				const polyline = new TMap.Polyline(polylineOptions);
// 				polyline.setMap(mapObj); // 将绘制的路线添加到地图上
// 			},
// 			// 按钮功能
// 			handleLocate() {
// 				this.getLocation();
// 			},
// 			handleNavigate(index) {
// 				this.goNavigate();
// 			},
// 			// 初始化
// 			loadScrpit() { // 挂载js
// 				// const script = document.createElement('script');
// 				// script.src =
// 				// 	`https://map.qq.com/api/gljs?v=1.exp&key=${this.key}&libraries=visualization&callback=mapInit`;
// 				// document.body.appendChild(script);
// 				// 新增的脚本加载逻辑
// 				// 创建 script 标签并设置 src 属性
// 				const script = document.createElement('script');
// 				script.src = `https://map.qq.com/api/gljs?v=1.exp&key=${this.key}&libraries=geometry&callback=mapInit`;
// 				script.async = true; // 异步加载
// 				document.body.appendChild(script);
// 			},
// 			// ------------------------------ 更新内容4 ----------------------------- //
// 			setIcon() { // 创建标点图标
// 				let that = this;
// 				// 创建 AMap.Icon 实例
// 				agriculture = new TMap.MarkerStyle({
// 					"width": 75, // 定义宽，单位：PX
// 					"height": 90, // 定义高，单位：PX
// 					"src": that.iconItem[0].markerUrl, // 标点图片链接：本地图片
// 				})
// 				property = new TMap.MarkerStyle({
// 					"width": 75,
// 					"height": 90,
// 					"src": that.iconItem[1].markerUrl,
// 				})
// 				construction = new TMap.MarkerStyle({
// 					"width": 75,
// 					"height": 90,
// 					"src": that.iconItem[2].markerUrl,
// 				})
// 				noRented = new TMap.MarkerStyle({
// 					"width": 75,
// 					"height": 90,
// 					"src": that.iconItem[3].markerUrl,
// 				})
// 				this.setMapMarker(); // 调用创建标点
// 			},
// 			setMapMarker() { // 创建标点实例
// 				let geometries = [];

// 				for (let i = 0; i < this.iconItem.length; i++) {
// 					let obj = { // 点标记数据
// 						"id": i, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
// 						"styleId": this.iconItem[i].name, // 对应标点实例的style的名称
// 						"position": new TMap.LatLng(this.iconItem[i].position[0], this.iconItem[i].position[
// 						1]), // 标点的坐标
// 						"properties": { // 自定义属性
// 							"title": this.iconItem[i].name
// 						}
// 					}
// 					geometries.push(obj);
// 				}

// 				marker = new TMap.MultiMarker({ // 构造函数创建标点实例
// 					id: 'marker-layer', // 定义的ID名称
// 					map: mapObj, // 挂载的地图实例
// 					styles: { // 加入标点的样式
// 						"agriculture": agriculture,
// 						"property": property,
// 						"construction": construction,
// 						"noRented": noRented,
// 					},
// 					geometries: geometries // 点标记数据数组
// 				});
// 				let that = this;
// 				marker.on("click", function(evt) { // 给标点绑定事件打开信息窗体
// 					that.setInfoWindow(evt)
// 				})
// 			},
// 			setInfoWindow(evt) {
// 				let that = this;
// 				// 信息窗体模拟数据，需要使用接口
// 				let imageIcon = agricultureIcon;
// 				let background = this.iconItem[0].background;
// 				let titleUrl = this.iconItem[0].titleUrl;
// 				let index = 0;
// 				let titleName = '';
// 				let assetName = '';
// 				let assetNumber = '';
// 				let managementUnit = '';
// 				let assetAddress = '';
// 				let landArea = '';
// 				let backgroundColor = '';

// 				//设置infoWindow
// 				infoWindow.open(); //打开信息窗
// 				infoWindow.setPosition(evt.geometry.position); // 根据当前坐标设置信息窗位置
// 				// console.log(evt.geometry.position);
// 				// 设置点击后的地图偏移的中心点
// 				mapObj.setCenter(new TMap.LatLng((evt.geometry.position.lat + 0.01), (evt.geometry.position
// 					.lng + 0.02)))

// 				if (evt.geometry.properties.title == 'agriculture') { // 根据不同的类型设置标点信息，需要接口代替
// 					background = that.iconItem[0].background;
// 					titleUrl = that.iconItem[0].titleUrl;
// 					index = 0;
// 					titleName = 'Cat House';
// 					assetName = '宠物商店';
// 					assetNumber = '076地块';
// 					managementUnit = 'Cat House发展有限公司';
// 					assetAddress = 'Cat House地块';
// 					landArea = '240072.40m²';
// 					backgroundColor = 'rgba(35, 181, 29, 1)';
// 				}
// 				if (evt.geometry.properties.title == 'property') {
// 					background = that.iconItem[1].background;
// 					titleUrl = that.iconItem[1].titleUrl;
// 					index = 1;
// 					titleName = 'Dog House';
// 					assetName = '宠物商店';
// 					assetNumber = '073地块';
// 					managementUnit = 'Dog House有限公司';
// 					assetAddress = 'Dog House路旁';
// 					landArea = '17979.97m²';
// 					backgroundColor = 'rgba(70, 207, 209, 1)';
// 				}
// 				if (evt.geometry.properties.title == 'construction') {
// 					background = that.iconItem[2].background;
// 					titleUrl = that.iconItem[2].titleUrl;
// 					index = 2;
// 					titleName = 'CatADog';
// 					assetName = 'CatADog用地';
// 					assetNumber = '044地块';
// 					managementUnit = 'CatADog有限公司';
// 					assetAddress = 'CatADog路旁';
// 					landArea = '14488.01m²';
// 					backgroundColor = 'rgba(243, 228, 43, 1)';
// 				}
// 				if (evt.geometry.properties.title == 'noRented') {
// 					background = that.iconItem[3].background;
// 					titleUrl = that.iconItem[3].titleUrl;
// 					index = 3;
// 					titleName = 'Pets';
// 					assetName = 'Pets用地';
// 					assetNumber = '099地块';
// 					managementUnit = 'Pets有限公司';
// 					assetAddress = 'Pets路旁';
// 					landArea = '30667.61m²';
// 					backgroundColor = 'rgba(253, 143, 33, 1)';
// 				}
// 				// 设置信息窗体的样式，通过模板字符串赋值
// 				infoWindow.setContent(`
// 							<!-- <div style="width: 379px;height: 134px;position:relative;padding:16px;z-index:90;">
// 								<div style="">
// 									<div style="display: flex;align-items: center;justify-content: flex-start;">
// 										<image style="width:138px;height:107px;" src="${titleUrl}"></image>
// 										<div style="display: flex;align-items: flex-start;justify-content: space-between;flex-flow: column;height:107px;margin-left:12px">
// 											<div style="display: flex;align-items: center;justify-content: flex-start;width:220px">
// 												<div style="width: 6px;height: 6px;background: ${backgroundColor};margin-right:6px;"></div>
// 												<div style="font-size: 12px;font-family: PingFang SC-Semibold, PingFang SC;font-weight: 600;color: #FFFFFF;">${titleName}</div>
// 											</div>
// 											<div style="display: flex;align-items: center;justify-content: flex-start;width:220px;color:rgba(255, 255, 255, .5);font-weight: 400;font-size: 10px;">
// 												<div>资产编号：</div><div>${assetNumber}</div>
// 											</div>
// 											<div style="display: flex;align-items: center;justify-content: flex-start;width:220px;color:rgba(255, 255, 255, .5);font-weight: 400;font-size: 10px;">
// 												<div>资产类型：</div><div>${assetName}</div>
// 											</div>
// 											<div style="display: flex;align-items: center;justify-content: flex-start;width:220px;color:rgba(255, 255, 255, .5);font-weight: 400;font-size: 10px;">
// 												<div>管理单位：</div><div style="width: 160px;display: block;	overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">${managementUnit}</div>
// 											</div>
// 											<div style="display: flex;align-items: center;justify-content: flex-start;width:220px;color:rgba(255, 255, 255, .5);font-weight: 400;font-size: 10px;">
// 												<div>资产地址：</div><div>${assetAddress}</div>
// 											</div>
// 											<div style="display: flex;align-items: center;justify-content: flex-start;width:220px;color:rgba(255, 255, 255, .5);font-weight: 400;font-size: 10px;">
// 												<div>土地面积：</div><div>${landArea}</div>
// 											</div>
// 										</div>
// 									</div>
// 									<div οnclick="(function (){this.window.getParkDetail(${index});isShowText=${true};})()"  style="cursor:pointer;margin-top:10px;display: flex;align-items: center;justify-content: flex-end;font-size: 12px;font-family: PingFang SC-Medium, PingFang SC;font-weight: 600;color: #FFFFFF;">
// 										<div>查看详情</div>
// 										<image src="${imageIcon}" style="width:8px;height:12px;margin-left:4px;margin-top:1px;"></image>
// 									</div>
// 								</div>
// 								<image src="${background}" style="position:absolute;width:100%;height:100%;top:0;left:0;z-index: -1;"></image>
// 							</div>`, ) -->
// 				isShowText = true; // 设置打开
// 			},

// 			// ---------------------------------------------------------------------- //
// 		}
// 	}
// 

<style>
	/* 	.content {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */

	.wrapperBox {
		position: relative;
		width: 100vw;
		height: 100vh;
		z-index: 1;
	}

	/* #wrapper {
		z-index: 20;
		width: 120vw;
		height: 120vh;
		top: -10vh;
		left: -10vw;
		position: absolute;
	} */
	.content {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	.map-container {
		position: relative;
		width: 100vw;
		height: 100vh;
		z-index: 1;
	}

	#wrapper {
		z-index: 2;
		/* 确保地图在按钮之上 */
	}

	.button-container {
		position: fixed;
		/* 固定定位在视口底部 */
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		padding: 10px;
		background-color: rgba(0, 0, 0, 0.5);
		/* 半透明背景，可以看到地图 */
		z-index: 3;
		/* 确保按钮容器在地图之上 */
	}

	.locate-button,
	.navigate-button {
		padding: 10px 20px;
		/* 增加水平内边距 */
		margin: 0 5px;
		/* 增加外边距以分隔按钮 */
		border: none;
		border-radius: 5px;
		color: white;
		background-color: #007AFF;
		flex-shrink: 0;
		/* 防止按钮缩小 */
	}

	.navigate-buttons {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	</style>